// 1. 导入
import { defineStore } from 'pinia'

// todo type的类型
// 好处 1. 里面字符串可以是随意的值   2. 方便阅读
export const TODO_TYPE = {
  all: 'all',
  unfinished: 'unfinished',
  finished: 'finished',
}

// 2. 导出
export const useTodoStore = defineStore('todos', {
  state: () => ({
    // todo 显示状态 默认是 all
    type: TODO_TYPE.all,
    // todo 列表
    todos: [
      { id: 1, text: 'learn Vue3 Pinia', finished: false },
      { id: 2, text: 'play game', finished: true },
      { id: 3, text: 'watch TV', finished: true }
    ]
  }),
  actions: {
    // 添加
    addTodo(text) {
      this.todos.push({
        id: Date.now(),
        text,
        finished: false
      })
    },
    // 删除
    delTodo(i) {
      if (confirm('确认删除么？')) {
        this.todos.splice(i, 1)
      }
    },
    // 全选
    checkAll(flag) {
      this.todos.forEach((v) => v.finished = flag)
    },
    // 清空
    clear() {
      if (window.confirm('是否要清空已完成的？')) {
        this.todos = this.todos.filter((v) => !v.finished)
      }
    },
    // 设置显示状态
    setType(type) {
      this.type = type
    }
  },
  // 计算属性
  getters: {
    // 是否全选
    isAll: (state) => {
      return state.todos.every((v) => v.finished)
    },
    // 统计未完成数量
    unFinishedCount: (state) => {
      return state.todos.filter((v) => !v.finished).length
    },
    // 符合当前状态的列表
    showTodos: (state) => {
      // 依据 todos 和 type 来获取
      switch (state.type) {
        case TODO_TYPE.all:
          return state.todos
        case TODO_TYPE.unfinished:
          return state.todos.filter((v) => !v.finished)
        case TODO_TYPE.finished:
          return state.todos.filter((v) => v.finished)
      }
    }
  }
})